<header>
  <div class="left">
    <span [ngClass]="{on:active== 0}" (click)="onClick(0)">日</span>
    <span [ngClass]="{on:active== 1}" (click)="onClick(1)">月度</span>
    <span [ngClass]="{on:active== 2}" (click)="onClick(2)">年度</span>

  </div>
  <div class="right" *ngIf="active">
    开始时间：
    <span>
      <select class="year" [(ngModel)]="startYear">
        <option [value]="year" *ngFor="let year of years"> {{year}} </option>
      </select>
      年
    </span>
    <span [ngStyle]="{'display':active == 1 ?'inline-block':'none'}">
      <select class="month" [(ngModel)]="startMonth">
        <option [value]="month" *ngFor="let month of months"> {{month}}</option>
      </select>
      月
    </span>
    结束时间：
    <span>
      <select class="year" [(ngModel)]="endYear">
        <option [value]="year" *ngFor="let year of years"> {{year}} </option>
      </select>
      年
    </span>
    <span [ngStyle]="{'display':active == 1 ?'inline-block':'none'}">
      <select class="month" [(ngModel)]="endMonth">
        <option [value]="month" *ngFor="let month of months"> {{month}}</option>
      </select>
      月
    </span>
    <span>
      <button (click)="onSearch()">查询</button>
    </span>
  </div>
  <div class="right" *ngIf="!active">
    时间：
    <span>
      <p-calendar [locale]="en" [(ngModel)]="startTime"></p-calendar>
    </span>
    <span>
      <button (click)="onSearch()">查询</button>
    </span>
    <span>
      <button (click)="onExportDayPower()">导出</button>
    </span>
    <span>
      <p-fileUpload [ngClass]="{'fileUpload-edit':!fileDayPower}" name="file" (uploadHandler)="onUploadDayPower($event)"
                    (onRemove)="onRemoveDayPower()" cancelLabel="取消" chooseLabel="日电量上传" customUpload="true"
                    auto="false"
                    enctype="multipart/form-data"></p-fileUpload>
    </span>
  </div>
</header>
<main>
  <section *ngIf="!active">
    <p-table [columns]="cols" [value]="rPowers" [paginator]="true" [rows]="rows" [showCurrentPageReport]="true" [resizableColumns]="true" [(first)]="firstDay"
             currentPageReportTemplate="显示 {{firstDay}} 到 {{firstDay+rows}} 共 {{rPowers.length}} 记录">
      <ng-template pTemplate="header" let-columns>
        <tr class="data-columns">
          <th style="width:10%;text-align: left" pResizableColumn>时间</th>
          <th style="width:10%;text-align: left" pResizableColumn>风场</th>
          <th style="width:10%;text-align: left" pResizableColumn>发电量(万kWh)</th>
          <th style="width:10%;text-align: left" pResizableColumn>网购电量（万kWh）</th>
          <th style="width:10%;text-align: left" pResizableColumn>上网电量（万kWh）</th>
          <th style="width:10%;text-align: left" pResizableColumn>平均风速（m/s）</th>
          <th style="width:10%;text-align: left" pResizableColumn>日最大出力</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-row let-columns="columns">
        <tr class="data-rows">
          <td class="ui-resizable-column">{{row.date}}</td>
          <td class="ui-resizable-column">{{row.plantName}}</td>
          <td class="ui-resizable-column">{{+row.genpow && +row.genpow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.pucspow&& +row.pucspow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.ongrdpow&& +row.ongrdpow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.avgwdspd&& +row.avgwdspd.toFixed(3)}}</td>
          <td class="ui-resizable-column">{{+row.maxpow&& +row.maxpow.toFixed(3)}}</td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage" let-columns>
        <tr>
          <td [attr.colspan]="columns.length" style="text-align: center">
            没有数据
          </td>
        </tr>
      </ng-template>
    </p-table>
  </section>
  <section *ngIf="active == 1">
    <p-table [columns]="cols" [value]="rPowerMonths" [paginator]="true" [rows]="rows" [showCurrentPageReport]="true" [resizableColumns]="true" [(first)]="firstMonth"
             currentPageReportTemplate="显示 {{firstMonth}} 到 {{firstMonth+rows}} 共 {{rPowerMonths.length}} 记录">
      <ng-template pTemplate="header" let-columns>
        <tr class="data-columns">
          <th style="width:10%;text-align: left" pResizableColumn>时间</th>
          <th style="width:10%;text-align: left" pResizableColumn>风场</th>
          <th style="width:10%;text-align: left" pResizableColumn>发电量(万kWh)</th>
          <th style="width:10%;text-align: left" pResizableColumn>网购电量（万kWh）</th>
          <th style="width:10%;text-align: left" pResizableColumn>上网电量（万kWh）</th>
          <th style="width:10%;text-align: left" pResizableColumn>平均风速（m/s）</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-row let-columns="columns">
        <tr class="data-rows">
          <td class="ui-resizable-column">{{row.date}}</td>
          <td class="ui-resizable-column">{{row.plantName}}</td>
          <td class="ui-resizable-column">{{+row.genpow && +row.genpow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.pucspow&& +row.pucspow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.ongrdpow&& +row.ongrdpow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.avgwdspd&& +row.avgwdspd.toFixed(3)}}</td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage" let-columns>
        <tr>
          <td [attr.colspan]="columns.length" style="text-align: center">
            没有数据
          </td>
        </tr>
      </ng-template>
    </p-table>
  </section>
  <section *ngIf="active == 2">
    <p-table [columns]="cols" [value]="rPowerYears" [paginator]="true" [rows]="rows" [showCurrentPageReport]="true" [resizableColumns]="true" [(first)]="firstYear"
             currentPageReportTemplate="显示 {{firstYear}} 到 {{firstYear+rows}} 共 {{rPowerYears.length}} 记录">
      <ng-template pTemplate="header" let-columns>
        <tr class="data-columns">
          <th style="width:10%;text-align: left" pResizableColumn>时间</th>
          <th style="width:10%;text-align: left" pResizableColumn>风场</th>
          <th style="width:10%;text-align: left" pResizableColumn>发电量(万kWh)</th>
          <th style="width:10%;text-align: left" pResizableColumn>网购电量（万kWh）</th>
          <th style="width:10%;text-align: left" pResizableColumn>上网电量（万kWh）</th>
          <th style="width:10%;text-align: left" pResizableColumn>平均风速（m/s）</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-row let-columns="columns">
        <tr class="data-rows">
          <td class="ui-resizable-column">{{row.date}}</td>
          <td class="ui-resizable-column">{{row.plantName}}</td>
          <td class="ui-resizable-column">{{+row.genpow && +row.genpow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.pucspow&& +row.pucspow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.ongrdpow&& +row.ongrdpow.toFixed(5)}}</td>
          <td class="ui-resizable-column">{{+row.avgwdspd&& +row.avgwdspd.toFixed(3)}}</td>

        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage" let-columns>
        <tr>
          <td [attr.colspan]="columns.length" style="text-align: center">
            没有数据
          </td>
        </tr>
      </ng-template>
    </p-table>
  </section>
</main>
<p-confirmDialog header="Confirmation" width="300" acceptLabel="是" rejectLabel="否"></p-confirmDialog>
